<!-- page content -->
<div class="right_col" role="main">
	<!-- top tiles -->
	<div class="row" style="display: inline-block">
		<div class="tile_count">
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Users</span>
				<div class="count">2500</div>
				<span class="count_bottom"><i class="green">4% </i> From last Week</span>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
				<div class="count">123.50</div>
				<span class="count_bottom"
					><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Males</span>
				<div class="count green">2,500</div>
				<span class="count_bottom"
					><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Females</span>
				<div class="count">4,567</div>
				<span class="count_bottom"
					><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
				<div class="count">2,315</div>
				<span class="count_bottom"
					><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
				<div class="count">7,325</div>
				<span class="count_bottom"
					><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
		</div>
	</div>
	<!-- /top tiles -->

	<div class="row">
		<div class="col-md-12 col-sm-12">
			<!-- <div id="main" class="dashboard_line" style="width: 600px; height: 400px"></div> -->
			<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
			<div id="dashboard_line" style="width: 600px; height: 400px"></div>
		</div>
	</div>
	<br />
</div>

<!-- echart -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById("dashboard_line"));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: "ECharts 入门示例",
		},
		tooltip: {},
		legend: {
			data: ["销量"],
		},
		xAxis: {
			data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
		},
		yAxis: {},
		series: [
			{
				name: "销量",
				type: "bar",
				data: [5, 20, 36, 10, 10, 20],
			},
		],
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
